<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<html>
<head>
<title>Thông tin cá nhân</title>
</head>
<body>
	<div class="list-view">
		<div class="pr-head">
			<span class="pr-detail-name">Tài khoản</span>
		</div>
		<div class="pr-detail">
			<div class="pr-profile-left">
				<div class="pr-profile-menu">
					<a class="pr-profile-menu-item modify-profile edit"><i></i> Chỉnh sửa</a> <a
						class="pr-profile-menu-item modify-account change-pass"><i></i>Đổi mật khẩu</a>
				</div>
			</div>
			<div class="pr-profile-right">
				<div id="profile-page-view" class="pr-profile-page">
				<span class="strong-text">${customerVO.lastname} ${customerVO.middle} ${customerVO.firstname}</span>
					<span class="pr-text separator"> 
						<span class="title-s-text"><span>Thông tin tài khoản</span></span>
						<span class="title-text">Tài khoản hiện có: </span> 
						<span class="field-text">${customerVO.pointCart} VNĐ</span>
					 
					<span class="pr-text separator"> 
						<span class="title-s-text">
							<span>Thông tin cơ bản</span>
						</span> 
						<span class="title-text">Giới tính:</span> 
						<span class="field-text">
							<c:choose>
								<c:when test="${customerVO.gender == 'male'}">Nam</c:when>
								<c:otherwise>Nữ</c:otherwise>
							</c:choose>
						</span> 
						<span class="title-text">Ngày sinh:</span> 
						<span class="field-text">${customerVO.birthday}</span> 
						<span class="title-text">Địa chỉ:</span> 
						<span class="field-text">${customerVO.address}</span> 
						<span class="title-text">Số điện thoại:</span> 
						<span class="field-text">${customerVO.phone}</span>
						<span class="title-text">Email:</span> 
						<span class="field-text">${customerVO.email}</span>
						<span class="title-text">Quốc tịch::</span> 
						<span class="field-text">${customerVO.country}</span>
					</span> 
				</div>
				<form action="changePassword" name="account" id="changeCusAccount">
					<input type="hidden" name="id" value="${account.id}">
					<div id="profile-page-password" class="pr-profile-page disable">
						<span class="pr-text separator"> 
							<span class="title-s-text">
								<span>Đổi mật khẩu</span>
							</span> 
							<span class="error errorPass"></span>
							<span class="title-text">Mật khẩu cũ:</span> 
								<input type="password" class="popup-input" name="oldpass"/> 
							<span class="title-text">Mật khẩu mới:</span> 
							<input type="password" class="popup-input"  name="newpass"/>
							<span class="title-text">Nhập lại mật khẩu:</span> 
							<input type="password" class="popup-input" name="reNewpass"/>
						</span> 
						<input type="button" class="popup-button right" value="Lưu" id="changePasswordCus"/>
					</div>
				</form>
				<form action="changeProfileCus" name="customerVO" id="changeProfileCus">
					<input type="hidden" name="id" value="${customerVO.id}">
					<div id="profile-page-edit" class="pr-profile-page disable">
						<span class="pr-text separator"> 
							<span class="title-s-text">
								<span>Thông tin cơ bản</span>
							</span> 
							<span class="title-text">Giới tính:</span> 
							<c:set var="male" value=""/>
							<c:set var="female" value=""/>
							<c:if test="${customerVO.gender == 'male'}">
							     <c:set var="male" value="checked"/>
							</c:if>
							<c:if test="${customerVO.gender == 'female'}">
							     <c:set var="female" value="checked"/>
							</c:if>
							<input	type="radio" class="popup-input radio" ${male } name="gender" value="male"/><span>Nam</span>
							<input	type="radio" class="popup-input radio" ${female } name="gender" value="female"/><span>Nữ</span>
							<span class="title-text">Ngày sinh:</span> 
							<input type="text" class="popup-input" name="birthday" value="${customerVO.birthday}"/>
							<span class="error errorDOB"></span> 
							<span class="title-text">Địa chỉ:</span> 
							<input type="text" class="popup-input" name="address" value="${customerVO.address}"/> 
							<span class="title-text">Số điện thoại:</span> 
							<input type="text" class="popup-input" name="phone" value="${customerVO.phone}"/>
							<span class="error errorPhone"></span>
							<span class="title-text">Email:</span> 
							<input type="text" class="popup-input" name="email" value="${customerVO.email}"/>
							<span class="error errorEmail"></span>
							<span class="title-text">Quốc tịch::</span> 
							<input type="text" class="popup-input" name="country" value="${customerVO.country}"/>
						</span>  
						<input type="button" class="popup-button right" value="Hoàn tất" id="changeProfileButton"/>
					</div>
				</form>
			</div>
		</div>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#changeProfileButton').click(function(){
					$.ajax({
						type: "POST",
						url: "changeProfileCustomer",
						data: $('#changeProfileCus').serialize(),
						success: function(data){
							if(!data.validate){
								if (data.errorMail != null) {
									$('.errorMail').text(data.errorMail);
								} else {
									$('.errorMail').text("");
								}
								if (data.errorDOB != null) {
									$('.errorDOB').text(data.errorDOB);
								} else {
									$('.errorDOB').text("");
									
								}
								if (data.errorPhone != null) {
									$('.errorPhone').text(data.errorPhone);
								} else {
									$('.errorPhone').text("");
									
								}
							} else {
								window.location.href="view-profile";
							}
						}
					});
				});
				$('#changePasswordCus').click(function(){
					$.ajax({
						type: "POST",
						url: "changePasswordCustomer",
						data: $('#changeCusAccount').serialize(),
						success: function(data){
							if(!data.validate){
								if (data.errorUsername != null) {
									$('.errorUsername').text(data.errorUsername);
								} else {
									$('.errorUsername').text("");
								}
								if (data.errorPass != null) {
									$('.errorPass').text(data.errorPass);
								} else {
									$('.errorPass').text("");
									
								}
							} else {
								window.location.href="view-profile";
							}
						}
					});
				});
			});
		</script>
</body>
</html>